<template>
  <el-dialog
    :title="title"
    :visible.sync="isVisible"
    :width="width"
    :before-close="handleClose"
    :lock-scroll="true"
    :close-on-click-modal="false"
    custom-class="pub_dialog"
    @open="getData"
  >
    <div style="display: flex;flex-direction: row; height:500px; background: #F3F5F8">
      <div style="min-width: 350px; border-right: 1px solid #f1f1f1; margin-left: 5px; margin-top: 10px; overflow: auto ">
        <el-tree
          style="padding-top: 10px;"
          class="filter-tree"
          :data="treeData"
          :props="defaultProps"
          default-expand-all
          @node-click="nodeClick"
          ref="tree">
        </el-tree>
      </div>
      <div style="width: calc(100% - 350px)">
        <div class="table-all">
          <!-- 搜索区 -->
          <div class="app-container search-box">
            <SearchForm
              :form="searchData.form"
              :options="searchData.options"
              @searchUpdate="search"
              @resetSearchData="resetSearchData"
            ></SearchForm>
          </div>
          <!-- 按钮区 -->
          <div class="app-container table-box">
            <div class="table-main">
              <!-- 表格 -->
              <v-table
                v-if="tableMainHeight>0"
                :table-columns="tableColumns"
                :table-data="tableData"
                :loading="loading"
                :is-index="false"
                ref="table"
                :selectionChange.sync="selection"
                :maxHeight="tableMainHeight">
                <template #checkType="scope">
                  {{getDictValue(scope.row.checkType, checkTypeOptions)}}
                </template>
              </v-table>
            </div>
            <div class="table-page">
              <!-- 页码 -->
              <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                          @pagination="search"/>
            </div>
          </div>
      </div>
      </div>
    </div>
   <span slot="footer" class="dialog-footer" v-if="hasDone">
      <el-button @click="cancel">取 消</el-button>
      <el-button v-if="openType=='policyMake'" type="primary" @click="policyMakeSure">确 定</el-button>
      <el-button v-else type="primary" @click="sure">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { dimensionTree,
    cityCheckTargetPage
  } from '@/api/risk/cityWaringResult'
  import SearchForm from '@/components/searchForm/index'
  import VTable from '@/components/VTable/index'
  import Pagination from '@/components/Pagination/index'
  export default {
    name: "targetDialog",
    components:{
      VTable,Pagination,SearchForm
    },
    props: {
      width: {
        type: String,
        default: "80%",
      },
      title: {
        type: String,
        default: "详情",
      },
      dialogVisible: {
        type: Boolean,
        default: false
      },
      year:{ type:String, default:null },
      cityCode:{ type:String ,default:null},
      openType:{},
      hasDone:{
        type:Boolean,
        default:true
      }
    },
    computed: {
      isVisible: {
        get() {
          return this.dialogVisible
        },
        set() {
          this.close()
        }
      }
    },
    data() {
      return {
        tableColumns:[
          {
            prop: 'checkType',
            label: '体检分类',
            minWidth: '100',
            slotname: 'checkType',
            options: {}
          },
          {
            prop: 'threeTargetName',
            label: '体检指标名称',
            minWidth: '220',
            slotname: 'threeTargetName',
            options: {}
          },
          {
            prop: 'oneTargetName',
            label: '指标大类',
            minWidth: '150',
            slotname: 'oneTargetName',
            options: {}
          },
          {
            prop: 'twoTargetName',
            label: '指标细类',
            minWidth: '150',
            slotname: 'twoTargetName',
            options: {}
          },
        ],
        tableData:[],
        selection: [],
        loading:false,
        total:1,
        pageNum:1,
        pageSize:10,
        searchData:{
          form:{
            threeTargetName:"",
            year:this.year,
            checkType:1,
            type:"",
            code:"",
            cityCode:this.cityCode,
            codeName:"",
          },
          options:[
            {
              title:'体检指标名称',
              key: "threeTargetName",
              type: "text",
            }
          ],
        },
        tableMainHeight: 0,
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'labelNum'
        },
        // 字典值
        checkTypeOptions:[],
        checkTypeMap: {"self": 1, "third": 2, "satisfied": 3}
      }
    },
    watch:{
      'year':{
        handler(newVal, oldVal) {
          this.searchData.form.year = newVal
        },
        deep: true,
        immediate: true
      }
    },
    methods: {
      nodeClick(data,node,self){
        this.selection = []
        console.log("da==============>",data, node ,self)
        if(data.type==0){
          // 大类
           this.searchData.form.checkType = this.checkTypeMap[data.id]
           this.searchData.form.type = ''
           this.searchData.form.code = ''
           this.searchData.form.codeName = ''
        }else {
           this.searchData.form.checkType = data.checkType
           this.searchData.form.type = data.type
           this.searchData.form.code = data.id
           this.searchData.form.codeName = data.label
        }
        this.search()
      },
      cancel(){
        this.close()
      },
      policyMakeSure(){
         if(this.selection.length==0){
            this.$message.warning("请选择指标")
            return
         }
         this.$emit('success', this.selection)
      },
      sure(){
        console.log("this.selection", this.selection)
        if(this.selection.length!=0){
          let data = {
            targetType:3,
            targetName:this.selection.map(t=>{return t.threeTargetName}).join("、"),
            targetCode:this.selection.map(t=>{return t.threeTargetNo}).join(","),
          }
          this.$emit('success', data)
          return;
        }
        if(this.searchData.form.type!=''){
          let data ={
            targetType:this.searchData.form.type,
            targetName:this.searchData.form.codeName,
            targetCode:this.searchData.form.code
          }
          this.$emit('success', data)
          return;
        }
       this.close()
      },
      getDictValue(value,option){
        let item = option.find(t=> t.value == value)
        if(item!=undefined){
          return item.label
        }
        return value
      },
      handleClose(done) {
        done()
        this.close()
      },
      close(){
        this.$emit('close')
      },
      getData(){
          this.getDimensionTreeData()
          console.log("this.searchData.form,",this.searchData.form, this.year)
          this.search()
      },
      getDimensionTreeData(){
          let data = {year:this.year,cityCode:this.cityCode}
          dimensionTree(data).then(res=>{
            if(res.code==200){
                this.treeData = res.data
            }
          })
      },
      search(){
        this.fetch({
          ...this.searchData.form,
        })
      },
      // 重置搜索条件
      resetSearchData(){
        this.searchData.form.threeTargetName = ''
      },
      fetch(params={}){
        params.pageSize = this.pageSize
        params.pageNum = this.pageNum
        if(params.threeTargetName!=null){
           params.threeTargetName  = params.threeTargetName.replace(/\%/g,"%25");
        }
        this.loading = true
        cityCheckTargetPage(params).then( res=>{
          if(res.code==200){
            this.total = res.data.total
            this.tableData = res.data.rows
            console.log('this.tableData===',this.tableData)
          }else{
            this.$message({
              message: this.$t('tips.systemException'),
              type: 'error'
            })
          }
        }).finally(final=>{
          this.loading = false
        })
      },
    },
    created(){
      this.checkTypeOptions = []
      this.$commonJs.filterDataDict("cityCheckType",this.checkTypeOptions)
    },
    mounted(){
      this.tableMainHeight = document.getElementsByClassName('table-main')[0].clientHeight - 44 //减去顶部按钮列表的高度
      console.log("this.tableMainHeight==3",this.tableMainHeight)
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-dialog__body{
    padding: 0px 5px;
  }
  .table-all {
    display: flex;
    flex-direction: column;
    height: 100%;

  .search-box {
    padding-bottom: 6px;
  }

  .table-box {
    padding-top: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;

  .table-main {
    flex: 1;
    overflow: auto;
  }

  .table-page {
  // padding-top: 10 px;
  // padding-bottom: 10 px;
  }

  ::v-deep .pagination-container {
    text-align: right;
  }

  }
  }
</style>
